<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false" 
    @ok="handleSave"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :confirmLoading="loading"
  >
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <!-- <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="validatorRules"
          slot="detail"
        > -->
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item
          label="算法名称"
          :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 20 }, sm: { span: 17 } }"
          prop="formulaName"
        >
          <a-input v-model="model.formulaName" placeholder="请输入算法名称"></a-input>
        </a-form-model-item> 

        <a-form-model-item
          label="备注"
          :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 20 }, sm: { span: 17 } }"
          prop="remark"
        >
       <a-textarea v-model="model.remark" rows="4" placeholder="请输入备注"/>
        </a-form-model-item> 
      </a-form-model>

      <!-- <footer-tool-bar>
        <a-button style="margin-right: 0.8rem" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleSave" :loading="loading">保存</a-button>
      </footer-tool-bar> -->
    </a-spin>
  </j-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import JFormContainer from '@/components/jeecg/JFormContainer'
import UserFormulaDetail from './detail/UserFormulaDetail'
import UserFormulaPortion from './detail/UserFormulaPortion'
import FooterToolBar from '@/components/tools/FooterToolBar'
import { duplicateCheck } from '@/api/api'
export default {
  name: 'UserFormulaForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
    UserFormulaDetail,
    UserFormulaPortion,
    FooterToolBar,
  },
  data() {
    return {
      title: '算法',
      formulaId: this.$route.params.formulaId,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {
        formulaName: '',
        remark: '',
        formulaContent: '',
        formulaContentHtml: '',
      },
      insertFunVisible: false,
      funConfirmLoading: false,
      addFunText: '',
      searchOptions: [],
      loading: false,
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        formulaName: [
          { required: true, message: '请输入算法名称!' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
          { validator: this.validateUsername },
        ],
        remark: [{ min: 0, max: 200, message: '长度在200 个字符以内', trigger: 'blur' }],
        formulaContentHtml: [{ required: true, message: '请输入内容!' }],
      },
      url: {
        add: '/userFormula/userFormula/add',
        edit: '/userFormula/userFormula/edit',
        queryById: '/userFormula/userFormula/queryById',
      },
      visible: false,
      drawerWidth: '80%',
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {},
  methods: {
    show(formulaId) {
      this.visible = true
      this.formulaId = formulaId
      this.loadData()
    },
    loadData() {
      this.title = (this.formulaId == 0 ? '新建' : '编辑') + '算法'
      if (this.formulaId && this.formulaId > 0) {
        this.isEdit = true
        let params = { id: this.formulaId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.model = res.result
          }
        })
      } else {
        this.isEdit = false
        this.model.formulaName = ''
        this.model.remark = ''
        this.model.formulaContent = ''
        this.model.formulaContentHtml = ''
      }
    },
    getAllTable() {
      let values = this.tableKeys.map((key) => getRefPromise(this, key))
      return Promise.all(values)
    },
    handleCancel() {
      this.visible = false
      //this.$router.push({ path: '/corp/userFormula/userFormulaList' })
    },
    handleSave() {
      var that = this
      var url = that.url.add
      if (this.formulaId && this.formulaId > 0) {
        url = that.url.edit
        that.model.id = this.formulaId
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.loading = true
          var re = /<(?:.)*?>/g // *? 意味着匹配任意数量的重复
          that.model.formulaContent = that.model.formulaContentHtml.replace(re, '@')
          that.model.formulaContent = that.model.formulaContent.replaceAll('&gt;', '>').replaceAll('&lt;', '<')
          postAction(url, that.model).then((res) => {
            that.loading = false
            if (res.success) {
              that.$message.success(res.message)
              that.formulaId = res.result.id
              that.visible = false
              that.$emit('ok',that.formulaId)
            } else {
              that.$message.warning(res.message)
            }
          })
        }
      })
    },
    validateUsername(rule, value, callback) {
      var params = {
        tableName: 'user_formula',
        fieldName: 'formula_name',
        fieldVal: value,
        dataId: this.formulaId,
      }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback('名称已存在!')
        }
      })
    },
  },
}
</script> 